<template>
  <div class="gridConfig">
    <span>列的数量: </span>
    <a-slider
      v-model:value="gridConfig.columnNum"
      :marks="marks"
      :min="0"
      :step="null"
      :max="Object.keys(marks).length - 1"
      :tipFormatter="null"
    />
  </div>
</template>
<script lang="ts">
export default {
  name: "gridConfig",
};
</script>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useGridStore } from "@/stores/useComponentStore";
import { storeToRefs } from "pinia";
const gridStore = useGridStore();
const gridConfig = storeToRefs(gridStore).gridConfig;
type numTonumObj = { [key: number]: number };
const marks = reactive<numTonumObj>({});
let steps = [1, 2, 3, 4, 6, 8, 12];
steps.forEach((value: number, i: number) => {
  marks[i] = value;
});
</script>
